<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
     <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel='stylesheet' type='text/css' href="Css/templatemo_style.css">
<title>MewPipePlay</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
    	
        $('.vote_v').click(function(e) {
     e.preventDefault();
     $typevote = $(this).attr('value')
     $id_vid = $(this).attr('name')
     var value ={"id":$id_vid, "type": $typevote}
 
     $.ajax({
     url: "videovote",
     type: "POST",
     data: value,
     dataType: 'json',
     cache: false,
     success: function(datajson) {
    	 
             		 //fonction a faire pour refresh la data 
     }
     });
});
        $('.vote_c').click(function(e) {
           
        e.preventDefault();
        $typevote = $(this).attr('value')
        $id_comment = $(this).attr('name')
        var value ={"id":$id_comment, "type": $typevote}
    
        $.ajax({
        url: "commentvote",
        type: "GET",
        data: value,
        dataType: 'json',
        cache: false,
        success: function(datajson) {
       	 
                		 //fonction a faire pour refresh la data 
        }
        });
   });
        $('.addcomment').click(function(e) {
            
        e.preventDefault();
        
        $commentaire =  document.getElementById("comm").value;
        $id_vid = $(this).attr('name')
        var value ={"idvid":$id_vid, "commentaire": $commentaire}
    
        $.ajax({
        url: "AddComment",
        type: "POST",
        data: value,
        dataType: 'json',
        cache: false,
        success: function(datajson) {
       	 
                		 //fonction a faire pour refresh la data 
        }
        });
   });
        
});
    </script>
<body id="bgPlay">

<jsp:include page="/Template/header.jsp" />

<div id="video">
		
		
<!-- <p> -->
<%-- <video width="820" height="615" src="/MewPipeProject/VIDEOUPLOAD/${video.idShare }${video.extention}" controls></video>  --%>
<!-- </p> -->

<video width="720" height="405" controls id="playVideoCSS">
	<source src="/MewPipeProject/VIDEOUPLOAD/${video.idShare }${video.extention}" type="video/${video.extention.substring(1)}">
	</video>
		<div id="ownerCss">
		<h1 id="ownerTitre">Titre de la video : ${video.nom}</h1>
		<h2 id="ownerTitre">Mis en ligne par : ${userOwner.pseudo }</h2>
		<p id="nbVuesCSS">Vues : ${video.nbVue} fois</p>
		
		<input type="button" class="vote_v" name="${video.id}" value="J'aime" >
		<p id="V_like">${video.nbDislike} <img src="images/thumbvert.png"/></p>
		<p id="V_dislike"><img src="images/thumbrouge.png"/> ${video.nbLike}</p>
		<input type="button" class="vote_v" name="${video.id}" value="Je n'aime pas">
		
		<div id="booost">
<input type="button" class="boooster_btn" value="Boost" disabled>
</div>
<div id="addcommentaire" >

<input type="text" id="comm" value="Entrez votre commentaire">
<input type="button" class="addcomment" name="${video.id}" value="Ajouter">
</div>

<div id="comments">
<c:forEach items="${ListComment}" var="comment">
	<div id="commentary">
		<p>${comment.auteur} a dit le ${comment.date_crea}</p>
   		<p>${comment.commentaire}</p>
		<p id="V_like">${comment.nbLike}</p>
		<p id="V_dislike">${comment.nbDislike}</p>
		
		<input type="button" class="vote_c" name="${comment.id}" value="LIKE" > 
   		<input type="button" class="vote_c" name="${comment.id}" value="DISLIKE">
   		
	</div>
</c:forEach>
</div>

		</div>
<%--    		<p>${video.id}</p> --%>
<%--    		<p>${video.idShare}</p>	 --%>
<%--    		<p>${video.pathShare}</p> --%>
<%--    		<p>${video.confidentialState}</p> --%>
   		
   		
		
   		
   		
   			 
   			
   		
   		
</div>

</body>
</html>